<template>
  <div class="monthlyAccount">
    <NavBar
      @goBack="goBack"
      :title="title"
    ></NavBar>
    <div class="content">
      <van-cell
        class="userNick"
        :title=monthAccountForm.consumerName
      />
      <van-cell
        class="item"
        title="联系方式"
        :value=monthAccountForm.contactWay
      />
      <van-cell
        class="item"
        title="月结账号"
        :value=monthAccountForm.monthlyBalanceAccount
      />
      <div class="code">
        <div
          class="codeBox"
          id="qrcode"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
import LocalStorage from '../../model/localStorage.js'
import { toGetVerificationCode } from 'api/user.js'
import QRCode from 'qrcodejs2'
import { Toast } from 'vant'
export default {
  name: 'monthlyAccount',
  components: {
    NavBar
  },
  data() {
    return {
      title: '月结账户验证码',
      monthAccountForm: {
        contactWay: '',
        monthlyBalanceAccount: '',
        verificationCode: '',
        consumerName: ''
      }
    }
  },
  methods: {
    goBack() {
      this.$router.replace({
        path: '/main'
      })
    }
  },
  mounted() {
    //初始化二维码
    let token = LocalStorage.get('token').split('-')[1]
    // let { phone } = JSON.parse(this.$store.state.app.userInfo)
    let { consumerName } = JSON.parse(this.$store.state.app.userInfo)
    this.monthAccountForm.consumerName = consumerName
    // console.log('token', LocalStorage.get('token'))
    new Promise((resolve, reject) => {
      toGetVerificationCode({ loginToken: token })
        .then(res => {
          // console.log(res)
          let { contactWay, monthlyBalanceAccount, verificationCode } = res.data
          this.monthAccountForm.contactWay = contactWay
          this.monthAccountForm.monthlyBalanceAccount = monthlyBalanceAccount
          let str = JSON.stringify({ contactWay, monthlyBalanceAccount, verificationCode })
          resolve(str)
        })
        .catch(err => {
          reject()
          Toast.fail({
            message: err
          })
        })
    })
      .then(str => {
        // alert()
        new QRCode('qrcode', {
          width: 170,
          height: 170,
          text: str,
          // 如果 链接 可跳转
          colorDark: '#000',
          colorLight: '#fff'
        })
      })
      .catch(() => {
        new QRCode('qrcode', {
          width: 170,
          height: 170,
          text: 'null',
          // 如果 链接 可跳转
          colorDark: '#000',
          colorLight: '#fff'
        })
      })
  }
}
</script>
<style lang="scss" scoped>
.monthlyAccount {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: $main-color;

  /deep/ .van-hairline--bottom::after {
    border-bottom: none;
  }
  .content {
    margin-top: 40px;
    border-radius: 8px;
    width: 100%;
    // background-color: #ffffff;
    box-sizing: border-box;
    padding-left: $padd;
    padding-right: $padd;
    /deep/ .van-cell::after {
      border-bottom: none;
    }
    .userNick {
      border-radius: 8px 8px 0 0;
      /deep/ .van-cell__title {
        text-align: center;
        font-weight: 700;
      }
    }
    .item {
      padding-top: 0px;
      padding-bottom: 0px;
      font-size: 12px;
      /deep/ .van-cell__title {
        color: #969799;
      }
      /deep/ .van-cell__value {
        color: black;
      }
    }
    .code {
      width: 100%;
      height: 260px;
      background-color: #ffffff;
      border-radius: 0 0 8px 8px;
      position: relative;
      .codeBox {
        position: absolute;
        width: 170px;
        height: 170px;
        top: 46%;
        left: 50%;
        transform: translate(-50%, -50%);

        // background-color: red;
      }
    }
  }
}
</style>
